<template>
	<view class="control">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(47, 117, 250, 0)"></QSNavbar>
		<view class="flex-col page">
			<view class="flex-col group_4">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_2">待支付</text>
						<text class="text_3">{{countdownh}}时{{countdownm}}分{{countdowns}}秒后自动关闭</text>
					</view>
					<text class="text_4">等待买家付款，请尽快支付</text>
					<view class="flex-col group_7">
						<view class="flex-row section_2">
							<image :src="data_xq.orderItem[0].goods_image" class="image_6" />
							<view class="flex-col items-start group_10">
								<text class="text_9">{{data_xq.orderItem[0].goods_name}}</text>
								<view class="flex-col text-wrapper_1"><text
										class="text_10">{{data_xq.orderItem[0].consumption_type}}</text></view>
								<text class="text_11">×{{data_xq.orderItem.length}}</text>
							</view>
						</view>
						<view class="flex-col section_3">
							<text class="text_12">订单信息</text>
							<view class="divider">
								<!--*-->
							</view>
							<view class="justify-between group_11 view">
								<text class="text_13">订单编号</text>
								<text class="text_15 text_16">{{data_xq.order_id}}</text>
							</view>
							<view class="justify-between group_12">
								<text class="text_17">商品价格</text>
								<text class="text_19">￥{{data_xq.orderItem[0].goods_amout}}</text>
							</view>
							<!-- <view class="justify-between group_11 view_2">
								<text class="text_13">优惠券抵扣</text>
								<text class="text_15 text_21">￥</text>
							</view> -->
							<view class="justify-between group_12">
								<text class="text_17">实际支付</text>
								<text class="text_23">￥{{data_xq.amount_payable}}</text>
							</view>
							<view class="justify-between group_12">
								<text class="text_17">创建时间</text>
								<text class="text_25">{{data_xq.create_at}}</text>
							</view>
							<!-- <view class="justify-between group_12">
								<text class="text_17">支付方式</text>
								<text class="text_27">微信</text>
							</view> -->
							<view class="justify-between group_13">
								<text class="text_28">收款方</text>
								<text class="text_29">{{data_xq.venue.venue_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="flex-col items-center button"><text class="text_30">立即支付</text></view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '订单详情',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabActive: 0,
				tabList: [{
						name: '已报名'
					},
					{
						name: '已结束'
					}
				],
				id: '',
				data_xq: {},
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行
				str_time: '',
				expire_time: '',
				t_time: '',
				t_times: '',
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getOrderDetail()
			this.timer = setInterval(() => {
				this.showtime()
			})
			setTimeout(() => {
				if (this.countdownh != '' || this.countdownm != '' || this.countdowns != '') {
					// this.paymoney()
				}
			}, 200)

		},
		onShow() {

		},
		methods: {
			// 时间倒计时
			showtime() {
				var nowtime = new Date(), //获取当前时间
					starttime = new Date(this.t_times); //定义结束时间
				// endtime = new Date(this.t_time); //定义结束时间
				var lefttime = starttime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24),
					//计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownh = lefth //返回倒计时的字符串
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					// uni.navigateTo({
					// 	url: '/pages/personal/orders/orders?tab=2',
					// });
					return this.countdownh = this.countdownh = this.countdownm = this.countdowns = "00"

				}
			},
			paymoney() {
				if (this.countdownh == '00' && this.countdownm == '00' && this.countdowns == '00') {
					uni.navigateTo({
						url: '/pages/personal/orders/orders?tab=2',
					});
				}
			},
			// 获取详情
			async getOrderDetail() {
				let params = {
					id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				}
				let res = await venues.getOrderDetail(params)
				if (res.code == 1) {
					this.data_xq = res.data.data

					this.create_at = this.data_xq.create_at
					this.expire_time = this.data_xq.expire_time
					var fullTime = this.create_at; // 日期字符串
					var timeArr = fullTime.replace(" ", ":").replace(/\:/g, "-").split("-");
					var nian = timeArr[0];
					var yue = timeArr[1];
					var ri = timeArr[2];
					var shi = timeArr[3];
					var fen = timeArr[4];
					var miao = timeArr[5];
					var str = nian + '/' + yue + '/' + ri + ' ' + shi + ':' + fen + ':' + miao;
					var t = new Date(str); //你已知的时间
					this.t_time = t
					var t_s = t.getTime(); //转化为时间戳毫秒数
					t.setTime(t_s + 1000 * 60 * 15); //设置新时间比旧时间多一分钟
					this.str_time = t
					var fullTimes = this.expire_time; // 日期字符串
					var timeArrs = fullTimes.replace(" ", ":").replace(/\:/g, "-").split("-");
					var nians = timeArrs[0];
					var yues = timeArrs[1];
					var ris = timeArrs[2];
					var shis = timeArrs[3];
					var fens = timeArrs[4];
					var miaos = timeArrs[5];
					var strs = nians + '/' + yues + '/' + ris + ' ' + shis + ':' + fens + ':' + miaos;
					var ts = new Date(strs); //你已知的时间
					this.t_times = ts
					// var t_ss = ts.getTime(); //转化为时间戳毫秒数
					// console.log(t_ss, '88888')
					// ts.setTime(t_ss + 1000 * 60 * 15); //设置新时间比旧时间多一分钟
					// this.str_times = ts

					// this.pay_waiting_time = this.data_xq.pay_waiting_time
					// var fullTimes = this.pay_waiting_time; // 日期字符串
					// var timeArrs = fullTimes.replace(/\:/g, "-").split("-");
					// var nian = timeArr[0];
					// var yue = timeArr[1];
					// var ri = timeArr[2];;
					// var shis = timeArr[3];
					// var fens = timeArr[4];
					// var miaos = timeArr[5] ;
					// var strs = nian + '/' + yue + '/' + ri + ' ' +  this.pay_waiting_time;
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		/deep/ .QS-navbar {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;
		}


	}

	html {
		font-size: 16px;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.items-start {
		display: flex;
		align-items: flex-start;
	}

	.items-center {
		display: flex;
		align-items: center;
	}

	.items-end {
		display: flex;
		align-items: flex-end;
	}

	.group_11 {
		padding: 0 19rpx;
	}

	.group_12 {
		margin-top: 39rpx;
		padding: 0 20rpx;
	}

	.text_13 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.text_15 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.text_17 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.page {
		background-color: #2f75fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_4 {
		padding: 180rpx 30rpx 20rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.button {
		padding: 26rpx 0 25rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
	}

	.footer {
		position: fixed;
		width: 100%;
		bottom: 25rpx;
		left: 0;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.text_30 {
		color: #2f75fa;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.text_4 {
		margin-top: 30rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 24rpx;
	}

	.group_7 {
		margin-top: 20rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.text_3 {
		margin-left: 20rpx;
		margin-top: 9rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 25rpx;
	}


	.section_2 {
		margin-top: 20rpx;
		padding: 30rpx 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.section_3 {
		margin-top: 20rpx;
		padding: 41rpx 0 39rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.text_8 {
		margin-top: 29rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
	}

	.image_6 {
		border-radius: 10rpx;
		width: 154rpx;
		height: 154rpx;
	}

	.group_10 {
		margin-left: 12rpx;
		margin-top: 9rpx;
		flex: 1 1 auto;
	}

	.text_12 {
		margin-left: 24rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 27rpx;
	}

	.divider {
		margin-top: 39rpx;
		height: 1rpx;
		border: dashed 1rpx #bebebe;
	}

	.view {
		margin-top: 38rpx;
	}

	.view_2 {
		margin-top: 39rpx;
	}

	.group_13 {
		margin-top: 38rpx;
		padding: 0 21rpx;
	}

	.text-wrapper {
		padding: 4rpx 0 5rpx;
		background-color: #ee364c;
		border-radius: 5rpx;
		width: 64rpx;
		height: 30rpx;
	}

	.text_9 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 27rpx;
	}

	.text-wrapper_1 {
		margin-left: 19rpx;
		margin-top: 30rpx;
		padding: 7rpx 0;
		background-color: #f3f3f3;
		border-radius: 18rpx;
	}

	.text_11 {
		margin-left: 20rpx;
		margin-top: 32rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 20rpx;
	}

	.text_19 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.text_21 {
		margin-bottom: 4rpx;
	}

	.text_23 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.text_25 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.text_27 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.text_28 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.text_29 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 21rpx;
	}

	.text_10 {
		margin-left: 21rpx;
		margin-right: 27rpx;
		color: #888888;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #ffffff;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>
